Manifeste d'Application Web : Votre Guide de Configuration pour les Progressive Web Apps

Le Manifeste d'Application Web est un fichier JSON qui fournit des informations sur votre application web aux navigateurs et aux systèmes d'exploitation. Ces informations sont utilisées lorsque l'application est installée sur l'appareil d'un utilisateur, définissant comment elle apparaît et se comporte en tant que Progressive Web App (PWA). Considérez-le comme le plan directeur qui transforme votre site web en une expérience installable, similaire à une application. Un manifeste bien configuré est crucial pour l'engagement des utilisateurs et la découvrabilité.

Qu'est-ce qu'une Progressive Web App (PWA) ?

Avant de plonger dans le Manifeste d'Application Web, récapitulons ce qu'est une PWA. Les PWA sont des applications web qui offrent une expérience similaire à une application aux utilisateurs. Elles sont :

• Fiables : Chargent instantanément et fonctionnent hors ligne ou sur des réseaux de faible qualité, grâce aux service workers.
• Rapides : Répondent rapidement aux interactions des utilisateurs avec des animations fluides et pas de défilement saccadé.
• Engageantes : Offrent une expérience utilisateur immersive avec des fonctionnalités comme les notifications push et la possibilité d'être installées sur l'écran d'accueil.

Le Rôle du Manifeste d'Application Web

Le Manifeste d'Application Web est la pierre angulaire d'une PWA. Il fournit les informations nécessaires aux navigateurs pour :

• Installer la PWA : Il permet aux utilisateurs d'installer l'application web sur leurs appareils, en l'ajoutant à leur écran d'accueil ou à leur lanceur d'applications.
• Afficher la PWA correctement : Il définit le nom de l'application, les icônes, la couleur du thème et d'autres aspects visuels.
• Contrôler le comportement de la PWA : Il spécifie comment l'application doit se lancer (par exemple, en mode plein écran ou dans une fenêtre autonome) et comment elle doit être intégrée au système d'exploitation.

Création de votre fichier `manifest.json`

Le Manifeste d'Application Web est un fichier JSON, généralement nommé `manifest.json`. Il doit être placé dans le répertoire racine de votre application web. Voici un exemple de base :

            {
  "name": "Mon Incroyable PWA",
  "short_name": "PWA Incroyable",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#000000",
  "icons": [
    {
      "src": "/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}
            

              
                Copy
              
            
          

Analysons chacune de ces propriétés :

`name`

Le nom complet de votre application web. Ce nom sera affiché aux utilisateurs lorsqu'ils seront invités à installer l'application et dans le lanceur d'applications.

Exemple :

            "name": "Application Actualités Mondiales"
            

              
                Copy
              
            
          

`short_name`

Une version plus courte du nom de votre application, utilisée lorsqu'il y a peu d'espace, comme sur l'écran d'accueil ou dans le lanceur d'applications. Restez concis.

Exemple :

            "short_name": "Actualités Mondiales"
            

              
                Copy
              
            
          

`start_url`

L'URL que l'application doit charger lorsqu'elle est lancée. C'est généralement la page d'accueil de votre application web, mais cela peut être une page de destination spécifique.

Exemple :

            "start_url": "/"
            

              
                Copy
              
            
          

Vous pouvez également utiliser une URL avec des paramètres de requête pour suivre comment les utilisateurs lancent votre PWA :

            "start_url": "/?utm_source=homescreen"
            

              
                Copy
              
            
          

`display`

Définit comment l'application doit être affichée lors du lancement. Il existe plusieurs options :

• `standalone` : L'application s'ouvrira dans sa propre fenêtre de premier niveau, sans éléments d'interface du navigateur comme la barre d'adresse.
• `fullscreen` : L'application occupera tout l'écran, masquant même la barre d'état.
• `minimal-ui` : Similaire à `standalone`, mais fournit une interface utilisateur minimale du navigateur, comme un bouton retour et un bouton d'actualisation.
• `browser` : L'application s'ouvrira dans un onglet ou une fenêtre de navigateur normale.

Recommandation : `standalone` est généralement l'option préférée pour les PWA.

Exemple :

            "display": "standalone"
            

              
                Copy
              
            
          

`background_color`

La couleur d'arrière-plan de l'écran de démarrage de l'application lors de son lancement. Ceci est important pour fournir une transition transparente entre l'icône de l'application et le contenu de l'application.

Exemple :

            "background_color": "#ffffff"
            

              
                Copy
              
            
          

`theme_color`

La couleur du thème utilisée pour styliser l'interface utilisateur de l'application, comme la barre d'état sur Android. Cette couleur doit correspondre à la marque de votre application.

Exemple :

            "theme_color": "#000000"
            

              
                Copy
              
            
          

`icons`

Un tableau d'objets, chacun représentant une icône pour l'application. Vous devez fournir plusieurs icônes de différentes tailles pour garantir que l'application ait une belle apparence sur différents appareils et résolutions.

Propriétés pour chaque icône :

• `src` : L'URL de l'image de l'icône.
• `sizes` : Les dimensions de l'icône en pixels (par exemple, "192x192").
• `type` : Le type MIME de l'image de l'icône (par exemple, "image/png").

Tailles d'icônes recommandées :

• 48x48
• 72x72
• 96x96
• 144x144
• 192x192
• 512x512

Exemple :

            "icons": [
  {
    "src": "/icons/icon-192x192.png",
    "sizes": "192x192",
    "type": "image/png"
  },
  {
    "src": "/icons/icon-512x512.png",
    "sizes": "512x512",
    "type": "image/png"
  }
]
            

              
                Copy
              
            
          

Propriétés Supplémentaires du Manifeste

Bien que les propriétés ci-dessus soient les plus courantes, le Manifeste d'Application Web prend en charge de nombreuses autres options pour configurer votre PWA :

`id`

Un identifiant unique pour votre PWA. Ceci est important pour éviter les conflits si vous avez plusieurs PWA portant le même nom.

Exemple :

            "id": "com.example.myapp"
            

              
                Copy
              
            
          

`scope`

Définit la portée de navigation de l'application. Ceci détermine quelles URL de votre site web sont considérées comme faisant partie de la PWA. Si l'utilisateur navigue en dehors de la portée, l'application s'ouvrira dans un onglet de navigateur normal.

Exemple :

            "scope": "/app/"
            

              
                Copy
              
            
          

Dans cet exemple, seules les URL commençant par `/app/` seront considérées comme faisant partie de la PWA.

`orientation`

Spécifie l'orientation préférée de l'écran pour l'application. Les options incluent `portrait`, `landscape`, `any`, et plus encore.

Exemple :

            "orientation": "portrait"
            

              
                Copy
              
            
          

`related_applications`

Un tableau d'objets qui définissent les applications natives associées. Cela vous permet de promouvoir vos applications natives auprès des utilisateurs qui ont déjà installé votre PWA.

Exemple :

            "related_applications": [
  {
    "platform": "play",
    "id": "com.example.myapp"
  }
]
            

              
                Copy
              
            
          

Cet exemple indique qu'il existe une application native associée sur le Google Play Store avec l'ID `com.example.myapp`.

`prefer_related_applications`

Une valeur booléenne qui indique si l'utilisateur doit être invité à installer l'application native associée au lieu de la PWA.

Exemple :

            "prefer_related_applications": true
            

              
                Copy
              
            
          

`categories`

Un tableau de chaînes de caractères qui représentent les catégories de l'application. Cela peut aider les utilisateurs à trouver votre application dans les magasins d'applications ou les résultats de recherche.

Exemple :

            "categories": ["actualités", "information"]
            

              
                Copy
              
            
          

`shortcuts`

Définit une liste de raccourcis auxquels les utilisateurs peuvent accéder depuis l'icône de l'application sur leur écran d'accueil. Cela permet aux utilisateurs d'effectuer rapidement des tâches courantes au sein de l'application.

Exemple :

            "shortcuts": [
  {
    "name": "Dernières Nouvelles",
    "short_name": "Nouvelles",
    "description": "Lire les derniers articles d'actualité",
    "url": "/news",
    "icons": [{
      "src": "/icons/news.png",
      "sizes": "192x192",
      "type": "image/png"
    }]
  }
]
            

              
                Copy
              
            
          

Lier le Manifeste à Votre Application Web

Une fois que vous avez créé votre fichier `manifest.json`, vous devez le lier à votre application web en ajoutant une balise <link> dans la section <head> de votre HTML :

            <link rel="manifest" href="/manifest.json">
            

              
                Copy
              
            
          

Validation de Votre Manifeste

Il est important de valider votre fichier `manifest.json` pour vous assurer qu'il est correctement formaté et qu'il contient toutes les propriétés requises. Vous pouvez utiliser des outils en ligne comme JSONLint ou les Chrome DevTools pour valider votre manifeste.

Test de Votre PWA

Après avoir créé et lié votre manifeste, vous devriez tester votre PWA sur différents navigateurs et appareils pour vous assurer qu'elle fonctionne comme prévu. Utilisez Chrome DevTools (Application -> Manifest) pour inspecter votre manifeste et diagnostiquer tout problème.

Meilleures Pratiques pour la Configuration du Manifeste d'Application Web

Voici quelques meilleures pratiques à garder à l'esprit lors de la configuration de votre Manifeste d'Application Web :

• Fournir toutes les propriétés requises : Assurez-vous d'avoir inclus toutes les propriétés essentielles, telles que `name`, `short_name`, `start_url`, `display`, `background_color`, `theme_color`, et `icons`.
• Utiliser des tailles d'icônes appropriées : Fournissez plusieurs icônes de différentes tailles pour prendre en charge différents appareils et résolutions.
• Choisir le bon mode d'affichage : Sélectionnez le mode `display` qui convient le mieux à l'expérience utilisateur de votre application. `standalone` est généralement l'option préférée.
• Valider votre manifeste : Validez toujours votre fichier `manifest.json` pour vous assurer qu'il est correctement formaté.
• Tester votre PWA : Testez votre PWA sur différents navigateurs et appareils pour vous assurer qu'elle fonctionne comme prévu.
• Optimiser pour le SEO : Utilisez des mots-clés pertinents dans votre `name`, `short_name` et `description` pour améliorer la découvrabilité de votre application.
• Envisager la localisation : Si votre application cible un public mondial, envisagez de fournir des versions localisées de votre manifeste avec des noms, descriptions et icônes différents pour différentes langues.

Exemples de Manifestes d'Applications Web Bien Configurées

Voici quelques exemples de Manifestes d'Applications Web bien configurés issus de PWA populaires :

Twitter Lite

            {
  "name": "Twitter Lite",
  "short_name": "Twitter",
  "icons": [
    {
      "src": "/static/icons/mstile-150x150.png",
      "sizes": "150x150",
      "type": "image/png"
    },
    {
      "src": "/static/icons/twitter-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/static/icons/twitter-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#1da1f2",
  "description": "Twitter Lite est un moyen plus rapide et plus respectueux des données de voir ce qui se passe dans le monde.",
  "orientation": "portrait"
}
            

              
                Copy
              
            
          

Starbucks

            {
  "name": "Starbucks",
  "short_name": "Starbucks",
  "icons": [
    {
      "src": "/static/icons/starbucks-icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/static/icons/starbucks-icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "start_url": "/",
  "display": "standalone",
  "background_color": "#f2f0eb",
  "theme_color": "#00704a",
  "description": "Commandez vos boissons et aliments Starbucks préférés avec l'application.",
  "orientation": "portrait",
  "shortcuts": [
    {
      "name": "Commander Maintenant",
      "short_name": "Commander",
      "description": "Commencer une nouvelle commande",
      "url": "/order",
      "icons": [{
        "src": "/static/icons/order-icon.png",
        "sizes": "192x192",
        "type": "image/png"
      }]
    }
  ]
}
            

              
                Copy
              
            
          

L'Avenir du Manifeste d'Application Web

Le Manifeste d'Application Web est une norme en évolution, avec de nouvelles fonctionnalités et capacités ajoutées au fil du temps. Gardez un œil sur les dernières mises à jour et recommandations du W3C pour vous assurer que vos PWA tirent pleinement parti des dernières technologies.

Conclusion

Le Manifeste d'Application Web est un composant essentiel de toute PWA. En configurant correctement votre manifeste, vous pouvez offrir une expérience utilisateur transparente et engageante, donnant à votre application web l'impression d'une application native. Ce guide a fourni un aperçu complet du Manifeste d'Application Web, y compris ses propriétés, ses meilleures pratiques et ses exemples. En suivant ces directives, vous pouvez libérer tout le potentiel de vos PWA et offrir une expérience utilisateur supérieure à vos utilisateurs du monde entier.

Adoptez la puissance du Manifeste d'Application Web et transformez vos sites web en expériences installables, similaires à des applications, qui ravissent les utilisateurs et stimulent l'engagement.